import { PlusOutlined, UploadOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-layout';
import {
  Button,
  Col,
  Divider,
  Form,
  Input,
  message,
  notification,
  Row,
  Select,
  Upload,
} from 'antd';
import axios from 'axios';
import styles from './index.module.css';

const formItemLayout = {
  labelCol: {
    // xs: { span: 14 },
    sm: { span: 8 },
  },
  // 设置输入框的大小
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 17 },
  },
};
const tailLayout = {
  // layout:"inner",
  wrapperCol: { offset: 14, span: 16 },
};
// const normFile = (e: any) => {
//   if (Array.isArray(e)) {
//     return e;
//   }
//   return e?.fileList;
// };

const OrderManage = () => {
  const [form1] = Form.useForm();
  const [api, contextHolder] = notification.useNotification();
  const openNotification = () => {
    api.open({
      message: '提交成功',
      duration: 2,
    });
  };
  const handleSubmit = (values) => {
    // 发送POST请求到后端
    axios
      .post('http://localhost:9090/order/save', values)
      .then((response) => {
        // 请求成功的处理逻辑
        console.log(response.data);
        openNotification();
      })
      .catch((error) => {
        // 请求失败的处理逻辑
        console.error(error);
      });
  };

  const props = {
    name: 'file',
    /* action: 'https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188',*/
    headers: {
      authorization: 'authorization-text',
    },

    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 导入成功！`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 导入失败`);
      }
    },
  };

  return (
    <PageContainer>
      {contextHolder}
      <Form
        {...formItemLayout}
        form={form1}
        className={styles.form}
        onFinish={handleSubmit}
        initialValues={{
          baseName: '武汉基地',
          orderCenterName: '厦门配送中心',
          salesName: '厦门中心',
          producer: 'F10402',
          producer: 'F10402',
          productId: 'GA0SL7000',
          num: '20',
          brand: 'haier',
        }}
      >
        <p>
          <h2>订单信息</h2>
        </p>
        <Divider />

        <Row gutter={24}>
          <Col span={8}>
            <Form.Item label="基地名称" name="baseName" rules={[{ required: true }]}>
              <Input allowClear placeholder="请输入基地名称" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="订单中心名称" name="orderCenterName" rules={[{ required: true }]}>
              <Input allowClear placeholder="请输入订单中心名称" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              label="售达方名称"
              name="salesName"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Select placeholder="请输入售达方名称">
                <Select.Option value="haierCompany">海尔公司</Select.Option>
                <Select.Option value="geliCompany">格力公司</Select.Option>
                <Select.Option value="meilinCompany">美菱公司</Select.Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="产地" name="producer" rules={[{ required: true }]}>
              <Input allowClear placeholder="请输入产地" id="success" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="产地描述" name="producer_descript" rules={[{ required: false }]}>
              <Input allowClear placeholder="请输入产地描述" id="warning2" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="详细信息" name="detailedInformation" rules={[{ required: false }]}>
              <Upload action="/upload.do" listType="picture-card">
                <div>
                  <PlusOutlined />
                  <div style={{ marginTop: 8 }}>上传文件</div>
                </div>
              </Upload>
            </Form.Item>
          </Col>
        </Row>

        <p>
          <h2>货物信息</h2>
        </p>
        <Divider />

        <Row gutter={24}>
          <Col span={8}>
            <Form.Item label="物料号" name="productId" rules={[{ required: true }]}>
              <Input allowClear placeholder="请输入物料号" id="error2" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="物料组" name="productGroup" rules={[{ required: false }]}>
              <Input allowClear placeholder="请输入物料组" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              label="品牌"
              name="brand"
              rules={[
                {
                  required: true,
                },
              ]}
            >
              <Select placeholder="请输入品牌">
                <Select.Option value="haier">海尔</Select.Option>
                <Select.Option value="geli">格力</Select.Option>
                <Select.Option value="meilin">美菱</Select.Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="批次" name="batch" rules={[{ required: false }]}>
              <Input allowClear placeholder="请输入批次" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="数量" name="num" rules={[{ required: true }]}>
              <Input allowClear placeholder="请输入数量" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="长宽高" name="length" rules={[{ required: false }]}>
              <Input allowClear placeholder="请输入长度" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="重量" name="weight" rules={[{ required: false }]}>
              <Input allowClear placeholder="请输入重量" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="体积" name="volume" rules={[{ required: false }]}>
              <Input allowClear placeholder="请输入体积" />
            </Form.Item>
          </Col>
        </Row>

        <p>
          <h2>物流信息</h2>
        </p>
        <Divider />

        <Row gutter={24}>
          <Col span={8}>
            <Form.Item label="提货点" name="pickupPoint" rules={[{ required: false }]}>
              <Input placeholder="请输入提货点" id="error2" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="要求到货时间" name="deadline" rules={[{ required: false }]}>
              <Input allowClear placeholder="请输入要求到货时间" />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="最终客户名称" name="customerName" rules={[{ required: false }]}>
              <Input allowClear placeholder="请输入最终客户名称" />
            </Form.Item>
          </Col>
        </Row>

        <Divider />
        <Row gutter={24}>
          <Col span={20}>
            <Upload {...props}>
              <Button size="large" type="primary" icon={<UploadOutlined />}>
                批量导入
              </Button>
            </Upload>
          </Col>
          <Col span={4}>
            <Form.Item {...tailLayout} colon={false}>
              <div
                style={{
                  width: '100%',
                  display: 'flex',
                  alignItems: 'center',
                  verticalAlign: 'center',
                  justifyContent: 'flex-end',
                }}
              >
                <Button size="large" htmlType="submit">
                  暂存
                </Button>
                <Button size="large" type="primary" htmlType="submit" style={{ marginLeft: 16 }}>
                  提交
                </Button>
              </div>
            </Form.Item>
          </Col>
        </Row>
        {/* </Space> */}
      </Form>
    </PageContainer>
  );
};
export default OrderManage;
